<template>
  <div class="shop-list-data-main">
    <div class="content">
      <div class="shop-item" v-for="(item,index) in props.shopList" :key="index">
        <el-image class="logo-img" :src="item.logo" fit="cover" >
          <template #error>
            <el-icon><icon-picture class="logo-img" /></el-icon>
          </template>
        </el-image>
        <div class="name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
  import { Picture as IconPicture } from '@element-plus/icons-vue'

const props = defineProps({
  shopList: {
    type: Array,
    default: () => {
      return {}
    }
  }
})

</script>
<style lang="scss" scoped>
.content {
  // display: grid;
  // grid-template-columns: min(264px) 1fr;
  // grid-template-rows: min(64px);
  // grid-gap: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  .shop-item {
    width: 210px;
    margin: 0 10px 12px 0;
    display: flex;
    align-items: center;
    .logo-img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .name {
      padding-left: 10px;
      line-height: 22px;
    }
  }
  .shop-item:nth-child(2n) {
    margin-right: 0px;
  }
}
</style>